iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 10

Day10--DIV自適應內容寬度,超過一定寬度即換行

  • 分享至 

  • xImage
  •  
  • CSS
.parent{
            font-size: 20px;
            display: inline-block;  //讓DIV能夠自適應寬度,同時可以設定寬高/margin/padding等等
            background-color:green;
            border: 2px solid green;
            border-radius: 7px;
            padding: 7px;
            margin:5px;
            color:white;
            max-width: 200px;  //寬度超過200px即換行
            word-wrap:break-word;
        }
  • HTML
<div>                    //若外層DIV不想換行,則移除此DIV
     <div class="parent">DIV自適應內容寬度</div>
</div>
<div>                    //若外層DIV不想換行,則移除此DIV
     <div class="parent">內容超過一定寬度即換行</div>
</div>
  • 成果
    https://ithelp.ithome.com.tw/upload/images/20200925/20129568EPN1o7rJ3R.png

上一篇
Day9--首尾DIV固定,中間DIV能夠自適應高度
下一篇
Day11--自訂<input type="file">樣式的三種方法
系列文
30天CSS&Bootstrap排版統整30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言